<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예약 절차</title>
<style type="text/css">
	#wrapper{
		margin-left: 70px;
		width: 800px;
		margin-bottom: 100px;
		font-family: nanum;
		margin-top: 100px;
	}
	.product_line { 
		width:705px; height:2px; float:left; background:#d3ccbe;
	}
	
	#reser_table tr{
		height: 40px;
	}
	
	#reser_table th{
		background:#ADABAB; 
		background:rgba(173,171,171,.3);
	}
	#reser_table{
		width: 700px;
		margin-top: 50px;
		margin-left: 10px;
	}
	#reser_table td{
		padding-left: 15px;
	}
	.reser_btn{
		width:130px;
		height:30px;
		margin-right:10px;
		background-color: #0D836B;
		font-family: "맑은 고딕";
		font-size:9pt;
		color:white;
		border: 0;
		border-radius: 5px;
	}
</style>
<script type="text/javascript">
	function addRow(){
		
		var table = document.getElementById('reser_table');
		var lastRow = table.rows.length;
		var row = table.insertRow(lastRow); 
		lastRow = lastRow -1;
		
		/* row.setAttribute('id', lastRow); */
		
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var cell3 = row.insertCell(2);
		
		cell1.align="center";
		cell2.align="center";
		cell3.align="center";
		
		var quantity = document.getElementById('quantity').value;
		var i = document.getElementById('item').value;
		var item_num = document.getElementById('item_num_'+i).value;
		var item_name = document.getElementById('item_name_'+i).value;
		var item_price = document.getElementById('item_price_'+i).value;
		var item = item_name+' ('+item_price+')';
		var checked = 'check';
		
		cell1.innerHTML = "<td width='200px'>"
							+"<input type='text' name='item_"+(lastRow-3)
							+"' value='"+item+"' style='font-family:nanum; text-align:center;"
							+"background-color:transparent; border:0' disabled='disabled'>"
							+"<input type='hidden' id='itemNum_"+(lastRow-3)+"'"
							+" name='itemNum_"+(lastRow-3)+"' value='"+item_num+"'>"
							+"<input type='hidden' id='itemPrice_"+(lastRow-3)+"' value='"+item_price+"'>"+
						  "</td>";
		cell2.innerHTML = "<td width='150px'>"
							+"<input type='text' id='quantity_"+(lastRow-3)+"' value='"+quantity+"'"
							+"style='font-family:nanum; text-align:center;"
							+"background-color:transparent; border:0' disabled='disabled' size='5px'>"
							+"<input type='hidden' name='quantity_"+(lastRow-3)+"' value='"+quantity+"'>"+
						  "</td>";
		cell3.innerHTML = "<td width='200px'>"
							+"<input type='checkbox' id='check_"+(lastRow-3)+"' value='"+(lastRow-3)+"'"
							+" style='font-family:nanum; text-align:center;"
							+"background-color:transparent; border:0' size='5px' checked='checked'"
							+"onclick='changeValue(this.id)'>"
							+"<input type='hidden' name='checkbox_"+(lastRow-3)+"' "
							+"id='checkbox_"+(lastRow-3)+"' value='"+checked+"'>"+
						  "</td>";
		
		var tempPay = parseInt(document.getElementById('totalPay').value,10); // 기본 방가격
		var totalPay = tempPay + (item_price * quantity);
		document.getElementById('totalPay').value = totalPay;
	}
	
	function changeValue(checkboxId){
		
		var check = document.getElementById(checkboxId).checked;
		var rowValue = document.getElementById(checkboxId).value;
		var item_price = parseInt(document.getElementById('itemPrice_'+rowValue).value,10);
		var quantity = document.getElementById('quantity_'+rowValue).value;
		
		var tempPay = parseInt(document.getElementById('totalPay').value,10);
		
		if(check == false){
			//체크가 풀린경우(금액에 더해줌)
			var totalPay = tempPay - (item_price*quantity);
			document.getElementById('totalPay').value = totalPay;
			document.getElementById('checkbox_'+rowValue).value = 'noCheck';
			
		} else if(check == true){
			//체크가 다시 된 경우
			var totalPay = tempPay + (item_price*quantity);
			document.getElementById('totalPay').value = totalPay;
			document.getElementById('checkbox_'+rowValue).value='check';
		}
	}
	
	function checkMenu(){
		var table = document.getElementById('reser_table');
		var lastRow = table.rows.length;
		lastRow = lastRow - 4;
		document.getElementById('finalSize').value = lastRow;
		document.getElementById('payment').value = document.getElementById('totalPay').value;		
	}
</script>
</head>
<body>
<!-- 자바스크립트 값 처리 -->
<c:forEach var="i" begin="0" end="${itemSize-1}" step="1">
	<input type="hidden" id="item_name_${i}" value="${itemList[i].item_name}">
	<input type="hidden" id="item_num_${i}" value="${itemList[i].item_num}">
	<input type="hidden" id="item_price_${i}" value="${itemList[i].item_price}">
</c:forEach>
<!-- 실제 값 처리 -->
	<div id="wrapper">
	<form action="seminarInsert.do" method="post" onsubmit="checkMenu()">
		<!-- 1. 예약하는 사람 /2. 지점이름 /3.세미나룸번호 / 4. 장소 /5. 시간-->
		<input type="hidden" name="email" value="${email}">
		<input type="hidden" name="branch_name" value="${branch_name}">
		<input type="hidden" name="seminar_num" value="${seminar_num}">
		<input type="hidden" name="ask_date" value="${ask_date}">
		<input type="hidden" name="ask_time" value="${ask_time}">
		<img src="./images/reservation/seminar_title.png" style="margin-bottom: -15px;">
		<p class="product_line"></p>
		<table id="reser_table">
			<tr>
				<th width="136px">신청자</th>
				<td width="200px">${member_name}</td>
				<th width="136px">연락처</th>
				<td width="200px">${member_phone}</td>
			</tr>
			<tr>
				<th>장소</th>
				<td>${branch_name} 
					<c:if test="${branch_name == '여의도점'}">
						NO.${(seminar_num)-3}
					</c:if>
					<c:if test="${branch_name == '강남점'}">
						NO.${seminar_num}
					</c:if>
				</td>
				<th>시간</th>
				<td>${ask_date} ${ask_time}</td>
			</tr>
			<tr>
				<th>이용인원</th>
				<td colspan="3">
					<!-- 6. 이용인원 -->
					<select name="visitor_num" style="width: 50px;">
						<c:forEach var="i" begin="4" end="${max_accept}" step="1">
							<option value="${i}">${i}</option>
						</c:forEach>
					</select>
					&nbsp;&nbsp;
					<span style="color:red; font-size: 9pt">
						* 최소 4명부터 이용가능합니다.(선택한 세미나룸에 따라 최대 인원이 달라집니다.)
					</span>
				</td>
			</tr>
			<tr>
				<th rowspan="1000">상품</th>
				<th>메뉴</th>
				<th>수량</th>
				<th>
					<span style="font-size: 10pt;">* 선택된 상품으로만 예약됩니다.</span>
				</th>
			</tr>
			<tr style=" background:rgba(173,171,171,.1);">
				<td style="text-align: center; padding-left: 0px;">
					<select id="item" style="font-family: nanum;">
						<c:forEach var="i" begin="0" end="${itemSize-1}" step="1">
							<option value="${i}">
								${itemList[i].item_name}&nbsp;(${itemList[i].item_price})
							</option>
						</c:forEach>
					</select>
				</td>
				<td style="text-align: center; padding-left: 0px;">
					<select id="quantity" style="font-family: nanum;">
						<c:forEach var="i" begin="1" end="${max_accept}" step="1">
							<option value="${i}">${i}</option>
						</c:forEach>
					</select>
				</td>
				<td style="text-align: center; padding-left: 0px;">
					<input type="button" value="추가" style="font-family: nanum;" onclick="addRow()">
				</td>
			</tr>
		</table>
		<!-- 세미나룸 이용 금액 -->
		<div style="text-align: center; margin-top: 100px">
			해당 세미나룸을 이용할 시, 지불할 금액은
			<input type="text" value="${roomPay}" 
				   style="color:#004000; border:0; background-color:transparent; 
				   font-size: 20pt; text-align: center;" 
				   disabled="disabled"  size="5px" id="totalPay"
				   >
			원 입니다.<br>
			<span style="font-size: 10pt; color:gray">(세미나룸 이용 기본 가격을 포함한 금액입니다.)</span>
		</div>
		<!-- 예약 완료 버튼 -->
		<div style="text-align: center; margin-top: 30px;">
			<input type="submit" value="예약완료" class="reser_btn" style="cursor: pointer">
		</div>
		<input type="hidden" name="finalSize" id="finalSize">
		<input type="hidden" name="payment" id="payment" value="${roomPay}">
		</form>
	</div>
</body>
</html>